<template>
    <div class="w750 gray-body" :class="radioMsg ? 'white-bg' : '' ">
        <div class="message">
            <van-list
                    v-model="paging.loading"
                    :finished="paging.finished"
                    finished-text="暂无更多"
                    @load="onLoadMore"
                    :immediate-check="false"
                    v-if="radioMsg && radioMsg.length"
            >
                <div class="radio-msg" v-for="(item, index) in radioMsg" :key="index"  :class="item.status == 1 ? 'on' : '' " @click.stop="gomsgDet(item.msgId)"  @touchstart="showDeleteButton(item.msgId,index)" @touchend="clearLoop(item.msgId,index)">
                    <div class="radio-time">
                        <span class="time">{{ item.recDate | dateformat('YYYY-MM-DD')}}</span>
                    </div>
                    <div class="radio-con">
                        <div class="entry-con">
                            <div class="con-box"><div class="fl"><span class="entry-name">{{item.title}}</span></div></div>
                        </div>
                        <div class="entry-con">
                            <div class="con-box">
                                <div class="fl"><span class="entry-name col-g">{{item.text}}</span></div>
                                <div class="fr">
                                    <span class="arr"><img src="../../../../assets/images/arrow.png" alt=""></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
            <Noempty :pic="require('../../../../assets/images/order-empty.png')"  :title="'暂无系统信息'"  v-else />
        </div>
    </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty'
import { systemList , systemDelete} from "api/message";
 export default {
   data () {
     return {
        radioMsg: null,  //系统广播信息
        paging: {
            currPage : 1,
            pageSize: 0,
            total: 0,
            loading: false,
            finished: false
        },
        Loop: null,
        selected: false,   //自定义一个列表默认为flase， 不选中
        allSelected: false,  //自定义一个全选默认为flase，不选择·
     }
   },
   mounted () {
       let that = this

       this.getSystemList(1, false)
   },
   methods: {
       //获取列表数据
       getSystemList(curPageNO = 1, isAppend = true) {
            systemList({
               curPageNO: curPageNO
            }).then(res => {
                if (res.status == 1) {
                    this.paging.total = res.result.total;
                    if (res.result.resultList) {
                        let resultList = res.result.resultList

                        resultList.forEach((item,index) => {
                            item.selected = this.selected
                        })

                        if (!isAppend) {
                            this.radioMsg = resultList
                        } else {
                            for (let i = 0; i < resultList.length; i++) {
                                if (this.allSelected == true) {
                                    resultList[i].selected = true
                                }
                                this.radioMsg.push(resultList[i])
                            }
                        }

                    }
                } else {
                    this.$toast(res.msg)
                }
            }).catch(e => {
                console.error(e);
                this.$toast({duration: 1000, message:"网络异常, 请稍后重试~"})
            }).finally(e => {
                this.paging.loading = false;
            });
       },
        onLoadMore() {
            setTimeout(() => {
                if(this.isMore()){//如果还有更多
                    this.getSystemList(this.paging.currPage += 1)
                    return;
                }

                //说明加载完毕, 到底了
                this.paging.loading = false;
                this.paging.finished = true;
            }, 500);
        },
        //去信息详细
        gomsgDet(msgId) {
            this.$router.push({
				path: `/radioMsgDet`,
				query: {
					msgId: msgId
				}
			});
        },
       //判断是否有更多
        isMore(){
            if (this.radioMsg.length >= this.paging.total) {
                return false
            } else {
                return true
            }
        },
        showDeleteButton(ids,index) {
            let that = this
            this.Loop = setTimeout(function() {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '是否删除此条消息'
                    }).then(() => {
                        systemDelete({
                            ids: ids
                        }).then( res => {
                            if (res.status == 1) {
                                this.$toast('删除成功')
                                that.radioMsg.splice(index, 1)

                            } else {
                                this.$toast(res.msg)
                            }
                        })
                    }).catch(() => {
                    // on cancel
                });
            }.bind(this), 1000)
        },
        clearLoop() {
            clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
        }

   },
   components: {
       Noempty
   }
 }
</script>

<style src="../../../../assets/css/message.css" scoped></style>
<style scoped>
    .radio-msg.on {
        color: #999
    }
    .w750 {
        /* -webkit-touch-callout:none;  系统默认菜单被禁用 */
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none; /*火狐*/
        -ms-user-select:none;  /*IE10*/
        user-select:none;
    }
</style>
